<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

        *{
            padding: 0;
            margin: 0;
        }

        body {
            /*background-image: url("../static/img/bg.jpg");*/
            background-image: url("[[@{/}]]img/bg.jpg");
            background-size: 100%;
            /*background-repeat: no-repeat;*/
            height: 100vh;
        }

        #my-form {
            width: 50%;
            margin: 50px auto;
            padding: 2% 13% 6% 13%;
            /*border: lightgray solid 1px;*/
            border-radius: 20px;
            background-color: rgba(0, 0, 0, 0.4);
            color: beige;
            box-shadow: 10px 10px 30px #595959;
        }

        #title {
            text-align: center;
        }

        .form-group span {
            float: right;
        }

        .error-style-js {
            color: #ff681d;
        }

        .success-style-js {
            color: rgba(65, 239, 50, 0.65);
        }

    </style>

    <script>
        /**
         * 判断字符串是否为空
         * @param str 给定字符型
         * @returns {boolean} true代表为空 | false代表字符串不为空
         */
        function isNull(str) {
            return str ==='' || str === undefined;
        }

        let msg = '[[${msg}]]';
        if(!isNull(msg)) {
            alert(msg);
        }
    </script>

</head>
<body class="container-fluid">

    <form id="my-form" method="post" onsubmit="return checkThenSubmit()" action="/registerUser">
        <h2 id="title">个人信息注册</h2>
        <div class="form-group" id="account-part">
            <label for="account">账号</label>
            <input type="text" class="form-control" id="account" name="account" placeholder="Account" onblur="checkAccount()">
            <span style="color: #ff681d"></span>
        </div>

        <div class="form-group" id="password-part">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="Password" onblur="checkPassword()">
            <span></span>
        </div>

        <div class="form-group" id="password-ensure-part">
            <label for="en-password">确认密码</label>
            <input type="password" class="form-control" id="en-password" placeholder="Ensure Password" onblur="checkPassword()">
            <span></span>
        </div>

        <div class="form-group">
            <label for="sex-select">
                性别
            </label>
            <select id="sex-select" name="sex" class="form-control">
                <option selected hidden disabled value="">请选择性别</option>
                <option value="男">male</option>
                <option value="女">female</option>
            </select>
        </div>

        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="text" class="form-control" id="email" name="email" placeholder="Email">
        </div>

        <div class="form-group">
            <label for="tel">联系方式(手机)</label>
            <input type="text" class="form-control" id="tel" name="tel" placeholder="Tel">
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox" id="confirm-agreement"> 注册将严格遵守网站规则
            </label>
        </div>
        <button type="submit" class="btn btn-info btn-block">点击注册</button>
    </form>


    <script>

        /**
         * 检查表格的正确性并体交
         */
        function checkThenSubmit() {
            if(!checkAgreementConfirm()) {
                alert('请同意协议再继续注册');
                return false;
            }
            return checkAccount() && checkPassword();
        }

        /**
         * 检查账号填写是否为空
         * @returns {boolean}
         */
        function checkAccount() {
            let account = document.querySelector("#account");
            const accountValue = account.value;
            let span = account.nextElementSibling;
            if(isNull(accountValue)) {
                span.innerText = '账号填写不能为空';
                return false;
            }else {
                span.innerText = '';
                return true;
            }
        }

        /**
         * 检查密码填写情况
         * @returns {boolean}
         */
        function checkPassword() {
            let password = document.querySelector("#password");
            let ensurePassword = document.querySelector("#en-password");
            const passwordValue = password.value, ensurePasswordValue = ensurePassword.value;
            let span = password.nextElementSibling, ensureSpan = ensurePassword.nextElementSibling;
            if(isNull(passwordValue)) {
                span.className = 'error-style-js';
                span.innerText = '密码填写不能为空';
                return false;
            }else if(isNull(ensurePasswordValue)) {
                span.innerText = '';
                ensureSpan.className = 'error-style-js';
                ensureSpan.innerText = '密码填写不能为空';
                return false;
            }
            else if(passwordValue !== ensurePasswordValue) {
                span.className = 'error-style-js';
                span.innerText = '两次密码填写不一致';
                ensureSpan.className = 'error-style-js';
                ensureSpan.innerText = '两次密码填写不一致';
                return false;
            } else {
                span.className = 'success-style-js';
                span.innerText = '密码填写正确';
                ensureSpan.className = 'success-style-js';
                ensureSpan.innerText = '密码填写正确';
                return true;
            }
        }

        /**
         * 检查协议同意情况
         * @returns {boolean}
         */
        function checkAgreementConfirm() {
            return document.querySelector('#confirm-agreement').checked === true
        }


    </script>


</body>
</html>